<template>
  <div>
    <div class="titleButton">
      {{ titleName }}
    </div>
    <Button type="info" ghost class="mapButton" v-if="zoomLevel !== 'provice'" @click="handleZoomLevel">
      <Icon type="md-arrow-back" size="16"/>
      返回
    </Button>
    <div class="mymap mapTool">
      <div id="allmap" style="width:100%;height:calc(100vh - 64px);"> </div>
    </div>
  </div>
</template>

<script>

import inMap from 'inmap'
import shanxi from './shanxi/shanxi'
import xian from './shanxi/xian'
import oilGeoData from './data/oilGeo'

import constData from '@/util/constData'

const mapStyle = [{
      "featureType": "water",
      "elementType": "all",
      "stylers": {
          "color": "#044161"
    }
  },
  {
      "featureType": "land",
      "elementType": "all",
      "stylers": {
          "color": "#052D7E"
      }
  },
  {
      "featureType": "boundary",
      "elementType": "geometry",
      "stylers": {
          "color": "#064f85"
      }
  },
  {
      "featureType": "railway",
      "elementType": "all",
      "stylers": {
          "visibility": "off"
      }
  },
  {
      "featureType": "highway",
      "elementType": "geometry",
      "stylers": {
          "color": "#052D7E"
      }
  },
  {
      "featureType": "highway",
      "elementType": "geometry.fill",
      "stylers": {
          "color": "#005b96",
          "lightness": 1
      }
  },
  {
      "featureType": "highway",
      "elementType": "labels",
      "stylers": {
          "visibility": "off"
      }
  },
  {
      "featureType": "arterial",
      "elementType": "geometry",
      "stylers": {
          "color": "#052D7E"
      }
  },
  {
      "featureType": "arterial",
      "elementType": "geometry.fill",
      "stylers": {
          "color": "#00508b"
      }
  },
  {
      "featureType": "poi",
      "elementType": "all",
      "stylers": {
          "visibility": "off"
      }
  },
  {
      "featureType": "green",
      "elementType": "all",
      "stylers": {
          "color": "#056197",
          "visibility": "off"
      }
  },
  {
      "featureType": "subway",
      "elementType": "all",
      "stylers": {
          "visibility": "off"
      }
  },
  {
      "featureType": "manmade",
      "elementType": "all",
      "stylers": {
          "visibility": "off"
      }
  },
  {
      "featureType": "local",
      "elementType": "all",
      "stylers": {
          "visibility": "off"
      }
  },
  {
      "featureType": "arterial",
      "elementType": "labels",
      "stylers": {
          "visibility": "off"
      }
  },
  {
      "featureType": "boundary",
      "elementType": "geometry.fill",
      "stylers": {
          "color": "#029fd4"
      }
  },
  {
      "featureType": "building",
      "elementType": "all",
      "stylers": {
          "color": "#1a5787"
      }
  },
  {
      "featureType": "label",
      "elementType": "all",
      "stylers": {
          "visibility": "off"
      }
  }
]
export default {
  data () {
    return {
      zoomLevel: 'provice', // provice city region
      inmap: '',
      bmap: '',
      polygonOverlay: '', // 地图行政区域涂图层
      moveLineOverlay: '', // 移动的线图层
      PointAnimationOverlay: '', // 点动画
      titleName: '陕西'
    }
  },
  mounted () {
    this.inmap = new inMap.Map({
      id: 'allmap',
      // skin: mapStyle,
      skin: "Blueness",
      center: [108.956654,34.074935], //地图中心点
      zoom: {
        value: 7, //当前地图级别
        show: true, //放大缩小按钮显示
        max: 14,
        min: 7
      }
    })
    this.bmap = this.inmap.getMap();//返回百度地图实例
    this.drawLine()
  },
  methods: {
    drawLine(){
      // 地图行政区域涂图层
      this.polygonOverlay = new inMap.PolygonOverlay({
        tooltip: {
            show: false,
            formatter: function(params) {
                return (
                "<div style='background-color:#fff;color:red;margin:-10px !important;padding:10px !important;'>" +
                " <div>" +
                " <span>时间 : </span><span>14:00</span>" +
                " </div>" +
                " <div>" +
                " <span>地区 : </span><span>" +
                params.name +
                "</span>" +
                " </div>" +
                " <div>" +
                " <span>评分 : </span><span>" +
                // params.count +
                Math.round(Math.random()*10+75) +
                "</span>" +
                " </div></div>"
                );
            },
            offsets: {
            top: 15,
            left: 15
            },
            customClass: "auto"
        },
        event: {
          // 行政区域点击事件
          onMouseClick: (item, event)=> {
            console.log('鼠标点击', item[0].name, 'this:', this)
            if(item[0].name === '西安') {
              this.titleName = '西安'
              this.polygonOverlay.setData(xian.xian);
              this.zoomLevel = 'city'
              // this.bmap.centerAndZoom(new BMap.Point(108.895713,33.597066), 10)
              this.bmap.centerAndZoom(new BMap.Point(108.87976,34.040899), 10)

              this.$emit('showInfo', this.titleName)

            }else if(item[0].name === '新城区') {
              console.log('地图中心：', xian.xian[0].properties.center)
              let lat = xian.xian[0].properties.center[0]
              let lon = xian.xian[0].properties.center[1]
              this.polygonOverlay.setData([xian.xian[0]])
              this.zoomLevel = 'region'
              this.titleName = '新城区'
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13)
            }else if(item[0].name === '未央区') {
              let lat = xian.xian[0].properties.center[0]
              let lon = xian.xian[0].properties.center[1]
              this.polygonOverlay.setData([xian.xian[4]]);
              this.zoomLevel = 'region'
              this.titleName = '未央区'
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13)
            }else if(item[0].name === '莲湖区') {
              let lat = xian.xian[0].properties.center[0]
              let lon = xian.xian[0].properties.center[1]
              this.polygonOverlay.setData([xian.xian[2]]);
              this.zoomLevel = 'region'
              this.titleName = '莲湖区'
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13)
            }else if(item[0].name === '碑林区') {
              let lat = xian.xian[0].properties.center[0]
              let lon = xian.xian[0].properties.center[1]
              this.polygonOverlay.setData([xian.xian[1]]);
              this.zoomLevel = 'region'
              this.titleName = '碑林区'
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13)
            }else if(item[0].name === '雁塔区') {
              let lat = xian.xian[0].properties.center[0]
              let lon = xian.xian[0].properties.center[1]
              this.polygonOverlay.setData([xian.xian[5]])
              this.zoomLevel = 'region'
              this.titleName = '雁塔区'
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13)
            }
          },
          onMouseOver (item) {
            // console.log('鼠标悬浮', JSON.stringify(item))
          }
        },
        style: {
            normal: {
            borderWidth: 1.5,
            label: {
                show: true, // 是否显示
                font: "13px bold ",
                color: "#fff"
            }
            },
            mouseOver: {
              shadowColor: "rgba(0, 0, 0, 1)",
              // shadowBlur: 10,
              backgroundColor: "rgba(93,158,247,0.4)",
              borderWidth: 1.5,
              label: {
                  color: "rgba(0, 0, 0, 1)"
              }
            },
            // selected: {
            // backgroundColor: "rgba(184,0,0,1)",
            // borderColor: "rgba(255,255,255,1)",
            // label: {
            //     color: "rgba(255,255,255,1)"
            // }
            // },
            colors: [
                "rgba(156,200,249,0.4)",
                "rgba(93,158,247,0.4)",
                "rgba(134,207,55,0.4)",
                "rgba(252,198,10,0.4)",
                "rgba(255,144,0,0.4)"
            ]
        }
        });

      let da = {
        "西万路加油站": "80分"
      }
      // 移动的线图层
      this.moveLineOverlay = new inMap.MoveLineOverlay({
        style: {
          point: { //散点配置
            tooltip: {
              show: true,
              formatter: (params) => {
                // console.log('鼠标', JSON.stringify(params))
                return (
                  `<div>
                    <div style="font-size:16px;font-weight:blod;">
                      <span>${params.name}</span>
                    </div>
                    <div>
                      <span>经纬度:</span>
                      <span>${params.geometry.coordinates} </span>
                    </div>
                    <div>
                      <span>服务评分:</span>
                      <span>80分 </span>
                    </div>
                  </div>`
                )
              },
              customClass: "auto"
            },
            // 散点样式
            style: {
              normal: {
                backgroundColor: 'rgba(200, 200, 50, 1)',
                borderWidth: 1,
                borderColor: "rgba(255,255,255,1)",
                size: 6,
                label: {
                  show: true,
                  color: 'rgba(255,255,255,1)'
                },
              },
              mouseOver: {
                backgroundColor: 'rgba(200, 200, 200, 1)',
                borderColor: "rgba(255,255,255,1)",
                borderWidth: 4,
              },
              selected: {
                backgroundColor: 'rgba(200,200,50,1)',
                borderColor: "rgba(255,255,255,1)",
                borderWidth: 4,
                size: 10
              },
            },
            event: { // 散点点击事件
              onMouseClick: (item) => {
                let stationInfo = constData.stationList.filter(ele => ele.label === item[0].name.split('站')[0])
                // console.log(stationInfo)
                this.$router.push({ path: '/station-analysis/station/' + stationInfo[0].value + '/today'})
              },
              onMouseOver (item) {
                // console.log('鼠标悬浮', JSON.stringify(item))
              }
            }
          },
          line: { //线的配置
            style: {
              normal: {
                borderColor: 'rgba(200, 200, 50, 1)',
                borderWidth: 2,
                // shadowColor: 'rgba(255, 250, 50, 1)',
                // shadowBlur: 20,
                lineOrCurive: "curve" // 弧度
              }
            }
          },
          lineAnimation: {
            style: {
              size: 4,
              //移动点颜色
              fillColor: '#fff',
              //移动点阴影颜色
              shadowColor: '#fff',
              //移动点阴影大小
              shadowBlur: 10,
              lineOrCurve: 'curve',
            }
          }
        },
        data: oilGeoData,
      });

      let data = [{
        name: '中国石油陕西销售公司',
        geometry: {
          type: 'Point',
          coordinates: [108.881385,34.236727]
        },
        style: {
          color: 'rgba(200, 200, 50, 0.7)',
          speed: 1,
          size: 50
        }
      },{
        name: '西万路站',
        geometry: {
          type: 'Point',
          coordinates: [108.910577,34.212948]
        },
        style: {
          color: '#f8983a',
          speed: 0.5,
          size: 25
        }
      },{
        name: '西门站',
        geometry: {
          type: 'Point',
          coordinates: [108.931253,34.264312]
        },
        style: {
          color: '#90EE90',
          speed: 0.5,
          size: 25
        }
      },{
        name: '朱宏路站',
        geometry: {
          type: 'Point',
          coordinates: [108.927522,34.33886]
        },
        style: {
          color: '#6EE7FF',
          speed: 0.5,
          size: 25
        }
      },{
        name: '明德门站',
        geometry: {
          type: 'Point',
          coordinates: [108.937915,34.21142]
        },
        style: {
          color: '#2d8cf0',
          speed: 0.5,
          size: 25
        }
      },{
        name: '凤城十路站',
        geometry: {
          type: 'Point',
          coordinates: [108.964351,34.360499]
        },
        style: {
          color: '#ff9900',
          speed: 0.5,
          size: 25
        }
      },{
        name: '草滩路站',
        geometry: {
          type: 'Point',
          coordinates: [108.954202,34.305523]
        },
        style: {
          color: '#ed3f14',
          speed: 0.5,
          size: 25
        }
      }]

      this.PointAnimationOverlay = new inMap.PointAnimationOverlay({
        style: {
          fps: 90, //动画帧数
          color: "#FAFA32",
          size: 20,
          speed: 0.15
        },
        data: data
      });

      // this.inmap.add(this.PointAnimationOverlay);
      this.polygonOverlay.setData(shanxi.shanxi)
      this.inmap.add(this.polygonOverlay);
      this.inmap.add(this.moveLineOverlay);

      // overlay.setData(shanxi.shanxi)
    },
    handleZoomLevel () {
      console.log('返回按钮 ', this.zoomLevel)
      if(this.zoomLevel === 'city') {
        this.polygonOverlay.setData(shanxi.shanxi);
        this.titleName = '陕西'
        this.zoomLevel = 'provice'
        this.bmap.centerAndZoom(new BMap.Point(108.956654,34.074935), 7)

        this.$emit('showInfo', this.titleName)

      }else if(this.zoomLevel === 'region') {
        this.polygonOverlay.setData(xian.xian);
        this.zoomLevel = 'city'
        this.titleName = '西安'
        this.bmap.centerAndZoom(new BMap.Point(108.645667,34.11907), 10)
      }

    }
  }
}
</script>

<style>
.echarts {
  width: 100%;
  height: 100%;
}
.mymap {
  /* height: 63vh; */
  /* width: 100%; */
  overflow: hidden;
  /* border: 2px solid #084272; */
  margin: 0 auto;
}
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
  bottom: 2px !important;
}
.inmap-scale-group {
  bottom: 5px;
}
.auto {
  color: #fff;
  padding:5px 15px;
  border:0;
  background-color: rgba(13, 72, 121, 0.3);
}
.mapButton {
  position: absolute;
  top: 10%;
  right: 30%;
  z-index: 999;
}
.titleButton {
  position: absolute;
  color: #FF9900;
  font-size: 30px;
  top: 8%;
  right: 49%;
  z-index: 9999;
}
.mapTool .inmap-scale-group {
  right: 28%;
  bottom: 36%;
}
</style>